<template>
  <div class="form-view normal-shadow slim-view">
    <div style="width: 300px">
      <el-card shadow="hover">
        <el-form :model="formObj" :rules="formRules" ref="elFormRef" label-width="120px">
          <el-form-item label="名称" prop="name">
            <el-input v-model="formObj.name" placeholder="" :minlength="3" :maxlength="5" show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="formObj.email" placeholder="" type="email" required></el-input>
          </el-form-item>
          <el-form-item label="年龄" prop="age">
            <el-input-number v-model="formObj.age" placeholder="" controls-position="right" :precision="0" :step="1"></el-input-number>
          </el-form-item>

          <el-form-item label="测试数字">
            <el-input-number v-model="formObj.num" placeholder="" :controls="false" :precision="0" :step="1"></el-input-number>
          </el-form-item>

          <el-button type="primary" @click="submitForm(elFormRef)" :loading="submitFormDisable === true">submit</el-button>
          <el-button @click="onShow" type="default">验证</el-button>
        </el-form>
      </el-card>
    </div>
    <!-- <Vcode :show="isShow" @success="onSuccess" @close="onClose" /> -->
    <div style="height: 400px">
      <el-auto-resizer>
        <template #default="{ height, width }">
          <el-table-v2 :columns="columns" :data="tableColumns" :width="width" :height="height" />
        </template>
      </el-auto-resizer>
    </div>
  </div>
</template>
<script setup lang="tsx">
import { copyObject } from '@/common/utils'
import { ElForm, type Column, type FormInstance, type FormRules, ElInput } from 'element-plus'
import { getCurrentInstance } from 'vue'
// import Vcode from 'vue3-puzzle-vcode'

let formObj = $ref({
  name: '',
  email: '',
  age: 18,
  num: null
})

const router = useRouter()
//@ts-ignore
const route = useRoute()
//@ts-ignore
let isShow = $ref(false)

let tableColumns = ref([
  {
    name: 'id',
    type: 'int',
    comment: 'customer comment',
    primaryKey: true
  },
  {
    name: 'category',
    type: 'varchar',
    comment: 'customer comment',
    primaryKey: false
  },
  {
    name: 'image',
    type: 'varchar',
    comment: 'customer comment',
    primaryKey: false
  },
  {
    name: 'target',
    type: 'varchar',
    comment: 'customer comment',
    primaryKey: false
  },
  {
    name: 'interpolation',
    type: 'varchar',
    comment: 'customer comment',
    primaryKey: false
  },
  {
    name: 'remark',
    type: 'varchar',
    comment: 'customer comment',
    primaryKey: false
  }
])

const onShow = () => {
  isShow = true
}

const onClose = () => {
  isShow = false
}
//@ts-ignore
const onSuccess = () => {
  onClose() // 验证成功，需要手动关闭模态框
}

let submitFormDisable = $ref(false)

const formRules: FormRules<typeof formObj> = {
  name: [
    { required: true, message: '请输入名称', trigger: 'blur' },
    { min: 3, max: 5, message: '长度须在3-5个字符', trigger: 'blur' }
  ],
  email: [
    {
      required: true,
      type: 'email',
      message: '请输入有效的邮箱'
    }
  ],
  age: {
    required: true,
    min: 18,
    type: 'number',
    message: '年龄需要超过18'
  }
}

const elFormRef = $ref<FormInstance>()
const stateData = history
const columns: Column[] = [
  {
    key: 'name',
    dataKey: 'name',
    title: '标题',
    width: 80,
    flexGrow: 1,
    align: 'center',
    cellRenderer: ({ rowData, column }) => {
      return (
        <>
          <ElInput v-model={rowData[column.dataKey!]}></ElInput>
        </>
      )
    }
  },
  {
    key: 'type',
    dataKey: 'type',
    title: '类型',
    width: 130,
    //@ts-ignore
    cellRenderer: ({ rowData, column }) => {
      return <span></span>
    }
  },
  {
    key: 'comment',
    dataKey: 'comment',
    title: '备注',
    width: 100,
    cellRenderer: ({ rowData, column }) => {
      return <ElInput v-model={rowData[column.dataKey!]}></ElInput>
    }
  },
  {
    key: 'primaryKey',
    title: '主键',
    width: 200,
    cellRenderer: ({ rowData, column }) => {
      return <el-checkbox v-model={rowData[column.dataKey!]} label="主键" size="large" />
    }
  }
]

onMounted(() => {
  const instance = getCurrentInstance()
  console.log('instance', instance?.proxy?.$data)
  const copyDaifaPackageListByGroupNo = copyObject([{ packId: 2 }, { packId: 5 }, { packId: 1 }])
  console.log('copyDaifaPackageListByGroupNo before sort', JSON.stringify(copyDaifaPackageListByGroupNo))
  copyDaifaPackageListByGroupNo.sort((a, b) => {
    if ((a.packId ?? 0) > (b.packId ?? 0)) {
      return 1 // a应该在b之后
    } else if ((a.packId ?? 0) === (b.packId ?? 0)) {
      return 0
    } else if ((a.packId ?? 0) < (b.packId ?? 0)) {
      return -1 //第一个元素应该在第二个元素之前
    } else {
      return 0
    }
  })

  console.log('copyDaifaPackageListByGroupNo after sort', JSON.stringify(copyDaifaPackageListByGroupNo))

  console.log('form state ', router, stateData, window.history)
})
/**
 * 表单提交
 */
const submitForm = (formInstance?: FormInstance) => {
  try {
    submitFormDisable = true
  } finally {
    setTimeout(() => {
      submitFormDisable = false
    }, 1000)
  }

  console.debug('form instance', formInstance!.validate)
  console.debug('elFormInstance', elFormRef!.validate)
  console.debug('elFormInstance === formInstance', elFormRef === formInstance)
  if (elFormRef) {
    elFormRef.validate((valid) => {
      console.debug('valid', valid)
      if (valid === true) {
        console.log('form', formObj)
      }
    })
  }
}
</script>

<style lang="scss" scoped>
@keyframes scale-in-hor-left {
  0% {
    transform: scaleX(0);
    transform-origin: 0% 0%;
    opacity: 1;
  }

  100% {
    transform: scaleX(1);
    transform-origin: 0% 0%;
    opacity: 1;
  }
}

.form-view {
  animation: scale-in-hor-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  height: 100%;
  padding: 20px;
}
</style>
